import screenfull from 'screenfull'
import { onBeforeUnmount, onMounted, ref } from 'vue'

export function useFullscreen() {
  const isFullscreen = ref(screenfull.isFullscreen)

  function toggleFullscreen() {
    screenfull.toggle()
  }

  function handleFullscreenStatusChange() {
    isFullscreen.value = screenfull.isFullscreen
  }

  onMounted(() => {
    screenfull.on('change', handleFullscreenStatusChange)
  })

  onBeforeUnmount(() => {
    screenfull.off('change', handleFullscreenStatusChange)
  })

  return {
    isFullscreen,
    toggleFullscreen,
  }
}
